<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="40%"
      @close="closeHandler"
    >
      <el-form
        :model="formData"
        ref="form"
        :rules="formRules"
        label-width="120px"
        :inline="true"
        size="small"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入用户名名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="formData.mobile"
            placeholder="请输入手机号名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码名称"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-switch
            v-model="formData.sex"
            active-text="男"
            inactive-text="女"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </el-form-item>
        <br />

        <!-- 上传 -->
        <el-form-item label="用户头像">
          <el-row>
            <el-upload class="upload-demo">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-row>
        </el-form-item>
        <br />

        <!-- 按钮 -->
        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="isShow = false">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addUserInfoApi,
  editUserInfoApi,
  getUserInfoApi,
} from "@/api/userManager";
export default {
  data() {
    return {
      isShow: false,
      formData: {
        username: "",
        mobile: "",
        password: "",
        sex: "",
        icon: "",
        id: "",
      },
      // 校验规则
      formRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "change" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改用户" : "添加用户";
    },
  },
  methods: {
    // 关闭弹窗事件
    closeHandler() {
      // 清空表单
      this.formData = {
        username: "",
        mobile: "",
        password: "",
        sex: "",
        icon: "",
      };
      // 移除校验
      this.$refs.form.clearValidate();
    },
    // 添加事件
    async onSubmit() {
      try {
        // 1. 表单校验
        this.$refs.form.validate();
        // 2. 发起网络请求
        this.formData.id
          ? await editUserInfoApi(this.formData)
          : await addUserInfoApi(this.formData);
        // 3. 提示成功
        this.$message.success(this.formData.id ? "修改成功" : "添加成功");
        // 4. 关闭弹窗
        this.isShow = false;
        // 5. 更新列表
        this.$emit("updateList");
      } catch (error) {
        console.log(error);
      }
    },

    // 编辑回显
    async editUserInfo(id) {
      // 1. 获取信息
      let res = await getUserInfoApi(id);
      console.log(res);

      if (this.formData.id) {
        this.$refs.form.clearValidate();
      }

      res.sex *= 1;
      // 2. 赋值回显
      this.formData = res;
      // 3. 打开弹窗
      this.isShow = true;
    },
  },
};
</script>

<style>
</style>